@use '../../app.scss' as *;

.manage-page {
  @include content-area;
  padding: 0.5rem 1rem;

  .search-bar {
    display: flex;
    align-items: center;
    background-color: #f1f1f1;
    border-radius: 10px;
    padding: 8px 12px;
    margin: 10px 0;

    input {
      background: transparent;
      border: none;
      outline: none;
      flex: 1;
      margin-left: 8px;
      font-size: 15px;
    }
  }

  // Tabs样式
  .nut-tabs-titles {
    margin: 10px 0;
    width: 100%;
    border-radius: 8px;
  }

  .nut-tabs-titles-button .nut-tabs-titles-item-active .nut-tabs-titles-item-text {
    --nutui-tabs-button-active-background-color: #ffffff;
    --nutui-tabs-titles-item-active-color: #000000;
    --nutui-color-primary: #ffffff;
    --nutui-tabs-button-border-radius: 8px;

    height: 34px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }

  .task-list-container {
    padding-bottom: 5rem;
    margin-top: 12px;

    .empty-result {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;
      margin-top: 2rem;
      color: #6b7280;
      font-size: 0.875rem;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .task-section {
      margin-top: 1rem;

      &:first-child {
        margin-top: 0;
      }

      .section-title {
        font-size: 0.875rem;
        font-weight: 500;
        color: #6b7280;
        margin-bottom: 0.5rem;
        padding: 0 0.25rem;
        display: block;
      }

      .task-card {
        @include card;
        padding: 0.75rem;
        margin-bottom: 0.75rem;

        .task-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;

          .task-info {
            flex: 1;

            .task-title {
              font-weight: 500;
              font-size: 0.875rem;
              display: block;
            }

            .task-assigned-to {
              font-size: 0.75rem;
              color: #6b7280;
              margin-top: 0.25rem;
              display: block;
            }
          }

          .status-tag {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            border-radius: 9999px;

            &.processing {
              background-color: #eff6ff;
              color: #3b82f6;
            }

            &.completed {
              background-color: #ecfdf5;
              color: #10b981;
            }
          }
        }

        .task-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 0.75rem;

          .task-progress,
          .task-date {
            font-size: 0.75rem;
            color: #6b7280;
          }
        }
      }
    }
  }

  .action-bar {
    position: fixed;
    bottom: 83px;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background-color: #ffffff;
    border-top: 1px solid #f1f1f1;
    display: flex;
    justify-content: space-between;
  }

  .action-button {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    transition: all 0.3s ease;

    &.filter-button {
      background-color: #f3f4f6;
      color: #4b5563;
    }

    &.create-button {
      background-color: #3b82f6;
      color: #ffffff;
    }

    .button-icon {
      margin-right: 6px;
    }

    .button-text {
      font-weight: 500;
    }
  }
}